/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

Ext.ns("Extmx.PanelMenu");
Extmx.PanelMenu=Ext.extend(Ext.Panel,{
    frame:true,
    collapsible:true,
    titleCollapse: true,
    opciones:null,

    initComponent: function (){
        var _u=Ext.BLANK_IMAGE_URL;

        this.actions={};
        var _menu='<ul id="task-views">';
        Ext.each(this.opciones,function (item){
            item.id=Ext.id();
            this.actions[item.id+"_scope"]=item.scope;
            this.actions[item.id]=item.handler;
            _menu+='<li>'+
            '		<img style="width:16px" src="'+_u+'" class="'+item.iconCls+'"/>'+
            '		<a id="'+item.id+'" href="#">'+item.text+'</a>'+
            '</li>';
        },this);
        _menu+='</ul>';
        
        Ext.apply(this,{
            html:_menu
        });
        
        Extmx.PanelMenu.superclass.initComponent.apply(this,arguments);
    },
    onRender: function (){
        Extmx.PanelMenu.superclass.onRender.apply(this,arguments);
        var _this=this;
        var doAction=function (e, t){
            e.stopEvent();
            if(!Ext.isEmpty(_this.actions[t.id+"_scope"]))
            //si tiene scope, ejecutar el handler en el contexto del scope
                _this.actions[t.id].call(_this.actions[t.id+"_scope"]);
            else
                //ejecutar simplemente el handler sin importar el contexto
                _this.actions[t.id]();
        }
        this.body.on('mousedown', doAction, null, {delegate:'a'});
        this.body.on('click', Ext.emptyFn, null, {delegate:'a', preventDefault:true});        
    }
});
Ext.reg("panelmenu",Extmx.PanelMenu);